<h2 class="web-card title">欢迎来到web前端开发测试页</h2>
<d-card class="web-card">
  <d-toast [value]="msgs"></d-toast>
  <div #webQN>
    <form dForm [formGroup]="userFormGroup" [dValidateRules]="formRules['rule']" [layout]="layoutDirection"
      #userForm="dValidateRules" (dSubmit)="submitForm($event,webQN)">
      <!-- 姓名 -->
      <d-form-item>
        <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'请输入您的姓名.'">名字
        </d-form-label>
        <input dTextInput autocomplete="off" name="username" formControlName="username" placeholder="您的姓名"
          [dValidateRules]="formRules['usernameRules']" />
      </d-form-item>
      <!-- 性别 -->
      <d-form-item>
        <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'性别.'">性别
        </d-form-label>
        <d-radio-group [name]="'gender'" [values]="genders" [direction]="'row'" formControlName="gender"
          [dValidateRules]="formRules['genderRules']"> </d-radio-group>
      </d-form-item>
      <!-- 年龄 -->
      <d-form-item>
        <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'请输入您的年龄.'">年龄
        </d-form-label>
        <input dTextInput autocomplete="off" name="age" formControlName="age" placeholder="您的年龄"
          [dValidateRules]="formRules['ageRules']" />
      </d-form-item>
      <!-- 微信 -->
      <d-form-item>
        <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'请输入您的微信.'">微信
        </d-form-label>
        <input dTextInput autocomplete="off" name="weChat" formControlName="weChat" placeholder="您的微信"
          [dValidateRules]="formRules['weChatRules']" />
      </d-form-item>
      <!-- 动机 -->
      <d-form-item>
        <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'请选择您的初衷.'">初衷
        </d-form-label>
        <d-select [options]="motives" formControlName="motive" [multiple]="false" [attr.name]="'motives'"
          [filterKey]="'name'" [placeholder]="'请选择'" [dValidateRules]="formRules['motiveRules']">
        </d-select>
      </d-form-item>
      <!-- 性格 -->
      <d-form-item>
        <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'请选择您的性格.'">性格
        </d-form-label>
        <d-select [options]="characters" formControlName="character" [multiple]="false" [attr.name]="'character'"
          [filterKey]="'name'" [placeholder]="'请选择'" [dValidateRules]="formRules['characterRules']">
        </d-select>
      </d-form-item>
      <!-- 爱好 -->
      <d-form-item>
        <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'请选择您的爱好.'">爱好
        </d-form-label>
        <d-select [options]="hobbys" formControlName="hobby" [multiple]="true" [attr.name]="'hobbys'"
          [filterKey]="'name'" [placeholder]="'请选择'" [dValidateRules]="formRules['hobbyRules']">
        </d-select>
      </d-form-item>
      <!-- 英文字母多少个 -->
      <d-form-item>
        <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'英文多少字母？.'">英文字母个数
        </d-form-label>
        <d-input-number class="input-number" autocomplete="off" name="letter" formControlName="letter"
          placeholder="英文字母个数" [dValidateRules]="formRules['letterRules']"></d-input-number>
      </d-form-item>
      <!-- 如何判断正负数 -->
      <d-form-item>
        <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'如何判断正负数.'">判断正负数
        </d-form-label>
        <section class="area-box">
          <p>假设x值为不确定数，如何判断它是正数还是负数？</p>
          <textarea dTextarea autocomplete="off" name="number_p_n" formControlName="number_p_n" placeholder="如何判断正负数"
            [dValidateRules]="formRules['number_p_nRules']"></textarea>
        </section>
      </d-form-item>

      <d-form-operation>
        <d-button bsStyle="common" circled="true" dFormReset>重置</d-button>
        <d-button class="mr-element-spacing" [title]="userForm.errorMessage || ''" circled="true"
          style="margin-right: 8px" dFormSubmit [dFormSubmitData]="'register-button'">提交</d-button>
      </d-form-operation>
    </form>
  </div>
</d-card>